<template>
  <div>
    <Subject
      :pathName="pathName"
      :subName="subName"
      :btnTitle="'新增学科'"
      :search_title_1="'学科名称'"
      :counts="counts"
      :pageSize="pagesize"
      @currentPage="handelCurrentPage"
      @sizeChange="handelSizeChange"
      @addSubBtn="handelAddSubBtn"
      @search="handelSearch"
    >
      <template #table>
        <el-table :data="subList">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column
            prop="subjectName"
            label="学科名称"
          ></el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default="{ row }">
              <span>{{ row.addDate | dateformat }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
            :formatter="handelForm"
          ></el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录"
          ></el-table-column>
          <el-table-column prop="tags" label="标签"></el-table-column>
          <el-table-column prop="totals" label="题目数量"></el-table-column>
          <el-table-column label="操作" width="250">
            <template #default="{ row }">
              <el-button type="text" @click="jumpDir(row)">学科分类</el-button>
              <el-button type="text" @click="jumpTags(row)">学科标签</el-button>
              <el-button type="text" @click="change(row)">修改</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </Subject>
    <!-- 弹出框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handelClose"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            placeholder="请输入学科名称"
            v-model="form.subjectName"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="form.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Subject from "@/components/Subject";
import { show } from "@/api/hmmm/constants";
import {
  getSubjectsInfo,
  getSubSearch,
  editSubjects,
  addSubjects,
  jumpDirectorysList,
  jumpTagsList,
  delSubjects,
} from "@/api/subject";
export default {
  name: "",
  components: {
    Subject,
  },
  props: {},
  data() {
    return {
      btnTitle: "",
      title: "",
      query: {
        subjectName: "",
        page: 1,
        pagesize: 10,
      },
      counts: null,
      pagesize: null,
      subList: [],
      dialogVisible: false,
      form: {
        id: "",
        subjectName: "",
        isFrontDisplay: 1,
      },
      rules: {
        subjectName: [{ required: true, message: "学科名称不能为空" }],
      },
      dirForm: {
        page: 1,
        pagesize: 10,
        subjectID: "",
      },
      tagsForm: {
        page: 1,
        pagesize: 10,
        subjectID: "",
      },
      subName: "",
      pathName: "",
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getSubjectsInfo();
  },
  methods: {
    // 获取所有科目信息并渲染
    async getSubjectsInfo() {
      const { data } = await getSubjectsInfo(this.query);
      // console.log(data)
      this.counts = data.counts;
      this.pagesize = +data.pagesize;
      this.subList = data.items;
    },
    // 页码改变视图更新
    async handelCurrentPage(val) {
      this.query.page = val;
      this.getSubjectsInfo();
    },
    // 每页显示数改变视图更新
    handelSizeChange(size) {
      this.query.pagesize = size;
      this.getSubjectsInfo();
    },
    // 点击新增学科按钮，显示弹出框
    handelAddSubBtn() {
      this.title = "新增学科";
      this.dialogVisible = true;
    },
    // 搜索框内容
    async handelSearch(searchForm) {
      this.query.subjectName = searchForm.input1;
      await getSubSearch(this.query);
      this.getSubjectsInfo();
      searchForm.input1 = "";
    },
    // 修改数据
    change(row) {
      console.log(row);
      this.title = "修改学科";
      this.form.subjectName = row.subjectName;
      this.form.id = row.id;
      this.form.isFrontDisplay = row.isFrontDisplay;
      this.dialogVisible = true;
    },
    // 关闭弹框
    handelClose() {
      this.$refs.form.resetFields();
      this.form = {
        id: "",
        subjectName: "",
        isFrontDisplay: 1,
      };
    },
    // 提交数据 判断
    async submit() {
      try {
        await this.$refs.form.validate();
        if (this.title === "修改学科") {
          // console.log(this.form)
          this.query = await editSubjects(this.form);
          this.getSubjectsInfo();
          this.$message.success("修改成功");
        } else {
          this.query = await addSubjects(this.form);
          this.getSubjectsInfo();
          this.$message.success("添加成功");
        }
      } catch (error) {
        console.log(error);
      } finally {
        this.dialogVisible = false;
      }
    },
    // 带着id跳转去目录页
    async jumpDir(row) {
      // console.log(row)
      this.pathName = "目录管理";
      this.subName = row.subjectName; // 转给公共组件，用于面包屑数据更新
      console.log(this.pathName, this.subName);
      this.dirForm.subjectID = row.id;
      await jumpDirectorysList(this.dirForm);
      this.$router.push({
        path: "/subjects/directorys",
        query: {
          id: row.id,
        },
      });
    },
    // 带着id跳转去标签页
    async jumpTags(row) {
      this.pathName = "标签管理";
      this.subName = row.subjectName; // 转给公共组件，用于面包屑数据更新
      this.tagsForm.subjectID = row.id;
      console.log(this.pathName, this.subName);
      await jumpTagsList(this.tagsForm);
      this.$router.push({
        path: "/subjects/tags",
        query: {
          id: row.id,
        },
      });
    },
    // 删除
    async del(id) {
      await this.$confirm("此操作将永久删除该学科, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await delSubjects(id);
      this.getSubjectsInfo();
      this.$message.success("删除成功");
    },
    // 是否显示格式化
    handelForm(row, column, cellValue, index) {
      // 要去找 1所对应的值
      const obj = show.find((item) => item.value === row.isFrontDisplay);
      return obj ? obj.label : "未知";
    },
  },
};
</script>

<style scoped lang="scss"></style>
